@import "./geist.css" layer(base);
@import "./syntax-highlighting.css" layer(base);
@import "./twoslash.css" layer(base);
@import "tailwindcss";

@variant dark (&:is([data-theme='dark'] *));

@theme {
  --font-sans: "Geist", Arial, sans-serif;

  /** These values are duplicated at src/lib/constants.ts#BREAKPOINTS. */
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  --color-accent-light: #1e40af;
  --color-accent-dark: #7dd3fc;

  --color-blue-450: #4cc2ff;
  --color-blue-550: #0078d4;

  --color-red-650: #c42b1c;
  --color-red-1000: #442726;

  --color-green-150: #dff6dd;
  --color-green-450: #6ccb5f;

  --color-lime-1000: #393d1b;

  --color-yellow-75: #fff4ce;
  --color-yellow-1000: #433519;

  --color-neutral-150: #eeeeee;
  --color-neutral-250: #dddddd;
  --color-neutral-925: #0d0d0d;
  --color-neutral-1000: #111111;
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@utility details-anim {
  &details[open] > *:not(summary) {
    animation: details-show 100ms ease-out;
  }
}

@utility details-chevron {
  details[open] > summary > & {
    @apply rotate-90;
  }
}

@utility prose {
  & h1:not(:where([class~="not-prose"] *)) {
    @apply mb-6;
  }
  & h2:not(:where([class~="not-prose"] *)) {
    @apply mb-3 mt-6;
  }
  & :where(h3, h4, p, video):not(:where([class~="not-prose"] *)) {
    @apply my-3;
  }
}

@utility text-toc {
  @apply font-medium text-neutral-600 transition-colors duration-100 hover:text-black dark:text-neutral-400 dark:hover:text-white;
  &.active {
    @apply xl:text-accent-light xl:dark:text-accent-dark;
  }
  &.active > * {
    @apply xl:text-accent-light xl:dark:text-accent-dark;
  }
}

@utility active {
  &.text-toc {
    @apply xl:text-accent-light xl:dark:text-accent-dark;
  }
  & .text-toc > * {
    @apply xl:text-accent-light xl:dark:text-accent-dark;
  }
}

@utility text-comment {
  & {
    @apply text-neutral-600 dark:text-neutral-400;
  }
}

@utility link {
  & {
    @apply text-accent-light! dark:text-accent-dark! underline underline-offset-[5px];
  }
  & > * {
    @apply text-accent-light! dark:text-accent-dark! underline underline-offset-[5px];
  }
  &.sm {
    @apply underline-offset-4!;
  }
  &.sm > * {
    @apply underline-offset-4!;
  }
}

@utility sm {
  &.link {
    @apply underline-offset-4!;
  }
  & .link > * {
    @apply underline-offset-4!;
  }
}

@utility list {
  & {
    list-style-position: inside;
    list-style-type: disc;
    @apply break-words pl-4 marker:text-black dark:marker:text-white;
  }
  & > li {
    @apply mb-2;
  }
  & > li > & {
    @apply mt-2;
  }
}

@utility nav-button {
  & {
    @apply hover:bg-neutral-250 flex cursor-pointer items-center justify-center rounded-full bg-transparent p-3 duration-100 dark:hover:bg-neutral-800;
  }
}

@utility button {
  & {
    @apply rounded-md border px-3 py-2 text-center transition-colors duration-100;
    @apply dark:bg-neutral-1000 border-neutral-300 bg-neutral-100 hover:bg-neutral-200 dark:border-neutral-800 dark:hover:bg-neutral-800;
  }
}

@utility visible-dark {
  & {
    @apply invisible! hidden! dark:visible! dark:block!;
  }
}

@utility visible-light {
  & {
    @apply visible! block! dark:invisible! dark:hidden!;
  }
}

@layer base {
  * {
    @apply relative box-border min-w-0;
  }
  button {
    @apply cursor-pointer;
  }
  html,
  body {
    @apply m-0 flex h-full w-full p-0;
  }
  html {
    @apply scroll-smooth;
  }
  body {
    @apply bg-neutral-50 font-sans font-normal text-black dark:bg-neutral-950 dark:text-white;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  blockquote {
    @apply text-balance break-words;
  }
  h1 {
    @apply text-4xl font-semibold leading-10 tracking-tight;
  }
  h2 {
    @apply text-3xl font-semibold leading-10 tracking-tight;
  }
  h3 {
    @apply text-2xl font-semibold leading-7 tracking-tight;
  }
  h4 {
    @apply text-xl font-medium leading-5 tracking-tight;
  }
  details > summary {
    @apply cursor-pointer select-none list-none;
  }
  details > summary::-webkit-details-marker {
    @apply hidden;
  }

  #root-container {
    @apply relative m-0 flex h-fit min-h-screen w-full flex-col p-0;
  }

  #main-content {
    @apply flex;
    flex-grow: 1;
  }

  #nav-mobile-menu[open] > summary {
    @apply [&>:nth-child(1)]:translate-y-[0.7rem] [&>:nth-child(1)]:rotate-45 [&>:nth-child(2)]:opacity-0 [&>:nth-child(3)]:-translate-y-[0.7rem] [&>:nth-child(3)]:-rotate-45;
  }
}

@layer utilities {
  @keyframes details-show {
    from {
      opacity: 0;
      transform: var(--details-translate, translateY(-1rem));
    }
  }
}

@media (prefers-reduced-motion) {
  html {
    @apply animate-none! scroll-auto! transition-none!;
  }
  html *,
  html *:before,
  html *:after {
    @apply animate-[inherit]! transition-[inherit]!;
  }
}
